<template>
  <el-container class="main-container">
    <keep-alive>
      <Header :subtitle="subtitle" :header-height="headerHeight" :cover-name="coverName" />
    </keep-alive>
    <div class="main">
      <div class="avatar">
        <img src="../assets/images/avatar.gif" alt="LOGO" class="logo">
        <div class="username">
          Rainfer
        </div>
        <div class="signature">
          别怂，就是干！
        </div>
      </div>
      <el-row>
        <div class="el-col-24 el-col-md-20 main-content">
          <el-row>
            <div class="label">
              博客简介
            </div>
            <div>
              <el-table
                :data="tableData"
                :border="true"
                stripe
                class="el-col-24 el-col-md-20"
              >
                <el-table-column prop="name" label="项目" width="250" />
                <el-table-column prop="desc" label="内容" />
              </el-table>
            </div>
          </el-row>
          <el-row>
            <div class="label">
              个人简介
            </div>
            <div>
              学过PHP，也会Java；会Vue，也会React；喜欢尝试和学习新技术，不是在挖坑，就在填坑！
            </div>
          </el-row>
        </div>
      </el-row>
    </div>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script type="text/ecmascript-6">
import Header from '../components/Header'
import Footer from '../components/Footer'

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      subtitle: 'About',
      coverName: '/cover/cover2.jpg',
      headerHeight: 70,
      tableData: [
        {
          name: '昵称',
          desc: '雨飞  (Rainfer)'
        },
        {
          name: '邮箱',
          desc: 'cmFpbmZlcjUyMEBxcS5jb20=  (Base64)'
        },
        {
          name: '网址',
          desc: 'https://www.rainfer.cn'
        },
        {
          name: '前端',
          desc: 'Vue 2.6、Element UI 2.13.0'
        },
        {
          name: '后端',
          desc: 'YFCMF (基于ThinkPHP 5.1x)'
        }
      ]
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    .main-container {
        background-color: #eeeeee;

        .main {
            max-width: 1140px;
            width: 100%;
            padding: 3rem 15px;
            margin-right: auto;
            margin-left: auto;
            position: relative;
            margin-top: -3rem;
            background-color: #fff;
            border-radius: .5rem;
            z-index: 3;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;
            box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;

            .avatar {
                text-align: center;
                margin-top: -3rem;

                .logo {
                    width: 150px;
                    margin-top: -75px;
                    border-radius: 50%;
                    border: 3px solid #FFF;
                    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
                    transition: all .5s;

                    &:hover {
                        border: 3px solid #FF7F00;
                        transition: all .5s;
                        transform: rotate(360deg);
                        -ms-transform: rotate(360deg);
                        -moz-transform: rotate(360deg);
                        -webkit-transform: rotate(360deg);
                        -o-transform: rotate(350deg);
                    }
                }

                .username {
                    font-size: 2rem;
                    font-weight: 600;
                    margin: 1rem auto;
                }

                .signature {

                }
            }

            .main-content {
                float: none;
                margin: auto;

                .label {
                    font-weight: 600;
                    font-size: 1.5rem;
                    margin: 1rem auto .5rem auto;
                }

                .resume {
                    color: #00aeff;
                    cursor: pointer;

                    &:hover {
                        color: #1abc9c;
                    }
                }
            }
        }
    }
</style>
